import * as React from 'react';

export function Tag({ type, children, style = {} }) {
  return (
    <div className={type} style={style}>
      {children}
      <style jsx>{`
        div {
          display: inline-block;
          padding: 0.1rem 0.3rem;
          text-align: center;
          font-size: 11px;
          line-height: 16px;
          font-weight: 600;
          border-radius: 4px;
        }
        .primary {
          color: var(--color-geekblue-5);
          border: 1px solid var(--color-geekblue-3);
          background-color: var(--color-geekblue-1);
        }
        .purple {
          color: var(--color-purple-5);
          border: 1px solid var(--color-purple-3);
          background-color: var(--color-purple-1);
        }
        .cyan {
          color: var(--color-cyan-5);
          border: 1px solid var(--color-cyan-3);
          background-color: var(--color-cyan-1);
        }
        .gray {
          color: var(--color-gray-8);
          border: 1px solid var(--color-gray-6);
          background-color: var(--color-gray-2);
        }
      `}</style>
    </div>
  );
}
